<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">摇一摇</h1>
		</header>
		<div class="mui-content">
			<div id="box" style="background: #000;width: 100%;height: 100%;text-align: center;">
				<div id="up" style="width: 100%;height: 50%; -webkit-transition: all 1s;">
					<img src="img/up.png" >
				</div>
				<div id="down" style="width: 100%;height: 50%; -webkit-transition: all 1s;">
					<img src="img/down.png" >
				</div>
			</div>
		</div>
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init()
			mui.plusReady(function () {
			    plus.accelerometer.watchAcceleration(function(data){
					var timer = null,
					x=data.xAxis,
					y=data.yAxis,
					z=data.zAxis,
					up = mui('#up')[0],
					down = mui('#down')[0],
					offset = up.offsetHeight/2
					var audios = plus.audio.createPlayer('img/shark.wav')
					if(x+y+z>18 || x+y+z < -18) {
						audios.play()
						up.style.webkitTransform = 'translateY(-'+offset+'px)'
						down.style.webkitTransform = 'translateY('+offset+'px)'
						setTimeout(function() {
							audios.play()
						},1000)
						if(timer){
							clearTimeout(timer)
						}
						timer = setTimeout(function(){
							up.style.webkitTransform = ''
							down.style.webkitTransform = ''
							
						},1000)
						
					}
				})
			})
			
		</script>
	</body>

</html>
